<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="friends_table">
        <thead>
            <tr>
            <td>序号</td>
            <td>名字</td>
            <td>家乡</td>
            <td>未来想去的城市</td>
            </tr>  
        </thead>
        <tbody>

        </tbody>
    </table>
    <ul id="container">
        <li></li>
    </ul>
    <script>
        const friends = [
        {index: 1, name: '喻顺武', hometown: '南昌', city: '杭州'},
        {index: 2, name: '赖敏城', hometown: '南康', city: '杭州'},
        {index: 3, name: '陈煜明', hometown: '南昌', city: '杭州'},
        {index: 4, name: '聂紫祥', hometown: '南昌', city: '杭州'},
        ];
        // 数组的每一项（对象） -> tr>td>
        const newFriends = friends.map(function(friend){
           return `
           <tr>
            <td>${friend.index}</td>
            <td>${friend.name}</td>
            <td>${friend.hometown}</td>
            <td>${friend.city}</td>
            </tr>
           `
        })
       document.getElementById('friends_table').querySelector('tbody').innerHTML = newFriends.join('')
        //console.log(newFriends,'-----------');
        const qiang = {
            name : '刘国强',
            age:18,
            job:'大厂女程序员的专属鼓励师',
            city:'重庆',
            blo: '写代码就像吃火锅一样，要爽',
        }
        const users=['夏侯欣','饶乐','王飞'];
    //   document.getElementById('container').innerHTML=
    //   //字符串 div qiang.blo 变量 模板
    //   `
    //   <div>${qiang.name}</div>
    //   <div>${qiang.age}</div>
    //   <div>${qiang.job}</div>
    //   <div>${qiang.city}</div>
    //   <div>${qiang.blo}</div>
    //   `
    //   let html='';
    // //   for(let i = 0; i < users.length; i++){
    // //   html += '<li>' + users[i] + '</li>'
    // // }
    // users.forEach(function(users,index){
       
    //     html += '<li>' + users + '</li>'
    // }
    // )
    // document.getElementById('container').innerHTML=html;
    //    = '<div>' + qiang.name + '</div>'
    //    + '<div>' + qiang.age + '</div>'
    //    + '<div>' + qiang.job + '</div>'
    //    + '<div>' + qiang.city + '</div>'
    //    + '<div>' + qiang.blo + '</div>';
    

    //数组的每一项从字符串编程 变成html的字符串
    //join 把数组每一项都拼接到一起，
    document.getElementById('container').innerHTML = users.map(function(user,index){
        //console.log(user,index)
        return `<li>${user}</li>`
    }).join('')
    </script>
</body>
</html>